<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>hello world~!!</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
    <style>
        *{margin: 0;padding: 0;}
        body{font:16px/1.5 'Microsoft Yahei';}
        .clearfix:after{content:'';display:block;clear:both;}
        .fl{float:left;}
        .fr{float:right;}
        #register{
            width:360px;
            margin:50px auto;
            padding-bottom:20px;
            border-bottom:1px solid #ccc;
            position: relative;
        }
        #register .pic{
            width:150px;
            height:150px;
            border-radius:50%;

            background:no-repeat url('./images/logo.jpg')  center center/cover;
             margin:auto;


        }
        #register ul li{
            list-style: none;
            padding:10px;
            border-bottom:1px solid #00C896;
            position: relative;


        }
        #register ul li span{
           color:#ececec;
           font-size: 12px;
           font-style: italic;

        }
        #register ul li input{
           width:100%;
           height:30px;
           border:none;
           outline:none;
           font-size:16px;
           text-indent:10px;
        }
        #register ul li i{
            position: absolute;
            right:0;
            top:50%;
            font-style:normal;
            color:red;
            display: none;
        }
        #register ul li.check{
            border:none;
        }
        #register ul li.check img{
            position: absolute;
            right:0;
            top:10px;
        }
        #register .reg_but input{
            width:100%;
            height:50px;
            border:none;
            border-radius:5px;
            color:#fff;
            background: #00C896;
            cursor:pointer;
        }
         #register .reg_but input:hover{
            background: #00a896;

            border:1px solid #00C896;


         }
        #register .reg_tips{
            padding:10px;
            font-size: 12px;
            color:#666;

        }
        #register .reg_tips a{

            color:#00C896;
            text-decoration: none;

        }
        #register .copyright{
            position: absolute;
            padding:10px;
            background: #fff;
            bottom:-22px;
            left:50%;
            color:#ccc;
            margin-left:-50px;

        }


    </style>
</head>
<body>
    <div id="register">

        <div class="pic">

        </div>
        <form action="">
           <ul>
            <li>
                <span>请输入11位数字</span>
                <input type="text" placeholder='手机号'>
                <i>不合法!</i>

            </li>
            <li>
                <span>以英文开头&nbsp;&nbsp;包含字母&nbsp;_&nbsp;数字&nbsp;&nbsp;&nbsp;长度6~18位</span>
                <input type="text" placeholder='昵称'>
                <i>不合法!</i>

            </li>
            <li>
                <span>以英文开头&nbsp;&nbsp;包含字母&nbsp;_&nbsp;数字&nbsp;&nbsp;长度6~18位</span>
                <input type="password" placeholder='密码'>
                 <i>不合法!</i>

            </li>
            <li>
                <span>再次输入相同的密码</span>
                <input type="password" placeholder='再次输入密码'>
                 <i>不合法!</i>
            </li>
            <li>
                <span>邮箱如:example@QQ.com</span>
                <input type="text" placeholder='邮箱'>
                 <i>不合法!</i>
            </li>
            <li class='check'>
                <input type="text" placeholder='验证码'>
                <img src="./images/verifyCode.jpg" alt="">
            </li>
        </ul>
            <div class="reg_but">
                <input type="submit" value='注册'>
            </div>
        </form>
        <div class='reg_tips'>
            <span>点击“注册”按钮，即代表您同意</span>
            <a href="javascript:void(0)">《我们公司的用户协议》</a>
        </div>
        <div class="copyright">版权&copy;潭州</div>
    </div>
</body>
    <script>
        var register = document.getElementById('register');
        var aInp = register.getElementsByTagName('input');
        var tips = register.getElementsByTagName('i');
        var patt= {
            tel:/^1[3-8]\d{9}$/,
            name:/^([a-zA-Z]|[\u4e00-\u9fa5])(\w|[\u4e00-\u9fa5]){5,17}$/,
            email:/^\w{2,18}@\w{1,18}\.[a-zA-Z]{1,6}$/
        };

        for(var i=0;i<aInp.length;i++){
            aInp[i].index = i;
            aInp[i].onblur = function(){
                var val = this.value;
               switch(this.index){
                    case 0://手机号
                        var pattern = patt.tel;
                        test.call(this);
                        break;
                    case 1://昵称
                        var pattern = patt.name;
                        test.call(this);
                        break;
                    case 2://密码
                        var pattern = patt.name;
                        test.call(this);

                        break;
                    case 3://再次输入密码
                        var pattern = patt.name;
                        test.call(this);
                        break;
                    case 4://再次输入密码
                        var pattern = patt.email;
                        test.call(this);
                        break;
               }

               function test(){
                    if(val){
                        var result = pattern.test(val);
                        var _this = this;
                        if(!result){
                            this.focus();
                           tips[_this.index].style.display = 'block';
                            setTimeout(function(){
                                tips[_this.index].style.display = 'none';
                            },1500)

                        }
                        //处理用户名和密码相同情况
                        if(this.index==2 && this.value == aInp[1].value ){
                            _this.focus();
                            var tipsvalue =  tips[_this.index].innerHTML;
                            tips[_this.index].innerHTML = '密码和用户名不能相同！';
                            tips[_this.index].style.display = 'block';
                            setTimeout(function(){
                                tips[_this.index].style.display = 'none';
                                tips[_this.index].innerHTML =  tipsvalue;
                            },1500)
                        }
                        //处理再次输入的密码和首次密码不同情况
                        if(this.index==3 && this.value !== aInp[2].value ){
                            _this.focus();
                            var tipsvalue =  tips[_this.index].innerHTML;
                            tips[_this.index].innerHTML = '密码不一致！';
                            tips[_this.index].style.display = 'block';
                            setTimeout(function(){
                                tips[_this.index].style.display = 'none';
                                tips[_this.index].innerHTML =  tipsvalue;
                            },1500)
                        }


                    }

               }


            }

        }


    </script>
</html>
